<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        *{margin: 0;padding: 0;}
        *{box-sizing: border-box;}
        body{
            border: 1px solid red;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .form-wrapper{
            padding: 20px;
            border: 1px solid #ddd;
            min-width: 350px;
        }
        .form-wrapper .row{
            margin: 10px 0;
        }
        .form-wrapper .row>label{
            display: inline-block;
            min-width: 4em;
        }
    </style>
</head>
<body>
<div class="form-wrapper">
    <h1>注册</h1>
    <form id="signUpForm">
        <div class="row">
            <label>邮箱</label>
            <input type="text" name="email">
            <span class="error"></span>
        </div>
        <div class="row">
            <label>密码</label>
            <input type="password" name="password">
            <span class="error"></span>
        </div>
        <div class="row">
            <label>确认密码</label>
            <input type="password" name="password_confirmation">
            <span class="error"></span>
        </div>
        <div class="row">
            <input type="submit" value="注册">
        </div>
    </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    console.log($)
    let $form = $('#signUpForm')
    console.log($form)
    $form.on('submit', (e)=>{
        console.log(1)
        e.preventDefault()
        let hash = {}
        let need = ['email', 'password', 'password_confirmation']
        need.forEach((name)=>{
            let value = $form.find(`[name=${name}]`).val()
            console.log(value)
            hash[name] = value
            console.log(hash)
        })
        $form.find('.error').each((index, span)=>{
            $(span).text('')
        })
        if(hash['email'] === ''){
            $form.find('[name="email"]').siblings('.error')
                .text('填邮箱呀同学')
            return
        }
        if(hash['password'] === ''){
            $form.find('[name="password"]').siblings('.error')
                .text('填密码呀同学')
            return
        }
        if(hash['password_confirmation'] === ''){
            $form.find('[name="password_confirmation"]').siblings('.error')
                .text('确认密码呀同学')
            return
        }
        if(hash['password'] !== hash['password_confirmation']){
            $form.find('[name="password_confirmation"]').siblings('.error')
                .text('密码不匹配')
            return
        }
        $.post('/sign_up', hash)
            .then((response)=>{
                console.log(response)
            }, (request)=>{
                console.log(request)
                //Content-Type:text/html
                // console.log(request.responseText)
                // let object=JSON.parse(request.responseText)
                // console.log(object)

                //Content-Type:application/json
                let errors = request.responseJSON
                console.log(errors)
                let {error}=request.responseJSON
                console.log(error)
                if(error.email && error.email === 'invalid'){
                    $form.find('[name="email"]').siblings('.error')
                        .text('邮箱格式')
                }else if(error.email && error.email === 'existing'){
                    console.log(1)
                    $form.find('[name="email"]').siblings('.error')
                        .text('邮箱已存在')
                }
                // if(error.email && error.email === 'existing'){
                //     console.log(1)
                //     $form.find('[name="email"]').siblings('.error')
                //         .text('邮箱已存在')
                // }
                console.log(2)
            })
    })
</script>



</body>
</html>
